Q-4: DatePicker and TableLayout Implementation (5 Marks)
Question
i) Write a code to demonstrate the use of DatePicker in Android studio.
ii) Write a code to demonstrate the use of Table layout in android.
Answer
i) DatePicker Implementation
DatePicker is a widget that allows users to select a date. Here's a complete implementation:
XML Layout (activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select Date:"
android:textSize="18sp"
android:textStyle="bold"
android:layout_marginBottom="16dp" />
<DatePicker
android:id="@+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:calendarViewShown="false"
android:spinnersShown="true" />
<Button
android:id="@+id/btnShowDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show Selected Date"
android:layout_gravity="center"
android:layout_marginTop="16dp" />
<TextView
android:id="@+id/tvSelectedDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Selected Date will appear here"
android:textSize="16sp"
android:layout_gravity="center"
android:layout_marginTop="16dp" />
</LinearLayout>
Java Activity (MainActivity.java)
package com.example.datepickerdemo;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity {
private DatePicker datePicker;
private Button btnShowDate;
private TextView tvSelectedDate;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initialize views
datePicker = findViewById(R.id.datePicker);
btnShowDate = findViewById(R.id.btnShowDate);
tvSelectedDate = findViewById(R.id.tvSelectedDate);
// Set click listener
btnShowDate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showSelectedDate();
}
});
// Set date change listener
datePicker.setOnDateChangedListener(new DatePicker.OnDateChangedListener() {
@Override
public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
String selectedDate = dayOfMonth + "/" + (monthOfYear + 1) + "/" + year;
Toast.makeText(MainActivity.this, "Date changed to: " + selectedDate,
Toast.LENGTH_SHORT).show();
}
});
}
private void showSelectedDate() {
int day = datePicker.getDayOfMonth();
int month = datePicker.getMonth() + 1; // Month is 0-indexed
int year = datePicker.getYear();
String selectedDate = day + "/" + month + "/" + year;
tvSelectedDate.setText("Selected Date: " + selectedDate);
Toast.makeText(this, "Selected: " + selectedDate, Toast.LENGTH_LONG).show();
}
}
ii) TableLayout Implementation
TableLayout arranges its children into rows and columns. Here's a complete implementation:
XML Layout (table_layout.xml)
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Student Information Table"
android:textSize="20sp"
android:textStyle="bold"
android:layout_gravity="center"
android:layout_marginBottom="16dp" />
<TableLayout
android:id="@+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:background="#E0E0E0"
android:padding="2dp">
<!-- Header Row -->
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#4CAF50"
android:padding="8dp">
<TextView
android:text="ID"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:gravity="center"
android:padding="8dp" />
<TextView
android:text="Name"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:gravity="center"
android:padding="8dp" />
<TextView
android:text="Grade"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:gravity="center"
android:padding="8dp" />
<TextView
android:text="Marks"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:gravity="center"
android:padding="8dp" />
</TableRow>
<!-- Data Rows -->
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:layout_marginTop="2dp">
<TextView
android:text="001"
android:gravity="center"
android:padding="8dp"
android:background="#F5F5F5" />
<TextView
android:text="John Doe"
android:gravity="center"
android:padding="8dp" />
<TextView
android:text="A+"
android:gravity="center"
android:padding="8dp"
android:background="#F5F5F5" />
<TextView
android:text="95"
android:gravity="center"
android:padding="8dp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:layout_marginTop="2dp">
<TextView
android:text="002"
android:gravity="center"
android:padding="8dp"
android:background="#F5F5F5" />
<TextView
android:text="Jane Smith"
android:gravity="center"
android:padding="8dp" />
<TextView
android:text="A"
android:gravity="center"
android:padding="8dp"
android:background="#F5F5F5" />
<TextView
android:text="88"
android:gravity="center"
android:padding="8dp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:layout_marginTop="2dp">
<TextView
android:text="003"
android:gravity="center"
android:padding="8dp"
android:background="#F5F5F5" />
<TextView
android:text="Bob Wilson"
android:gravity="center"
android:padding="8dp" />
<TextView
android:text="B+"
android:gravity="center"
android:padding="8dp"
android:background="#F5F5F5" />
<TextView
android:text="82"
android:gravity="center"
android:padding="8dp" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="16dp">
<Button
android:id="@+id/btnAddRow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Add Row"
android:layout_marginEnd="8dp" />
<Button
android:id="@+id/btnRemoveRow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Remove Row"
android:layout_marginStart="8dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
Java Activity for TableLayout (TableActivity.java)
package com.example.tablelayoutdemo;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;
import android.widget.Toast;
public class TableActivity extends Activity {
private TableLayout tableLayout;
private Button btnAddRow, btnRemoveRow;
private int rowCount = 3; // Starting with 3 data rows
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.table_layout);
// Initialize views
tableLayout = findViewById(R.id.tableLayout);
btnAddRow = findViewById(R.id.btnAddRow);
btnRemoveRow = findViewById(R.id.btnRemoveRow);
// Set click listeners
btnAddRow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
addNewRow();
}
});
btnRemoveRow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
removeLastRow();
}
});
}
private void addNewRow() {
// Create new table row
TableRow newRow = new TableRow(this);
newRow.setLayoutParams(new TableLayout.LayoutParams(
TableLayout.LayoutParams.MATCH_PARENT,
TableLayout.LayoutParams.WRAP_CONTENT));
newRow.setBackgroundColor(Color.WHITE);
// Create TextViews for the row
TextView tvId = createTableCell(String.format("%03d", rowCount + 1), true);
TextView tvName = createTableCell("New Student", false);
TextView tvGrade = createTableCell("B", true);
TextView tvMarks = createTableCell("75", false);
// Add TextViews to the row
newRow.addView(tvId);
newRow.addView(tvName);
newRow.addView(tvGrade);
newRow.addView(tvMarks);
// Add row to table
tableLayout.addView(newRow);
rowCount++;
Toast.makeText(this, "Row added successfully!", Toast.LENGTH_SHORT).show();
}
private void removeLastRow() {
int childCount = tableLayout.getChildCount();
if (childCount > 1) { // Keep at least the header row
tableLayout.removeViewAt(childCount - 1);
rowCount--;
Toast.makeText(this, "Row removed successfully!", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(this, "Cannot remove header row!", Toast.LENGTH_SHORT).show();
}
}
private TextView createTableCell(String text, boolean alternateBackground) {
TextView textView = new TextView(this);
textView.setText(text);
textView.setGravity(android.view.Gravity.CENTER);
textView.setPadding(16, 16, 16, 16);
if (alternateBackground) {
textView.setBackgroundColor(Color.parseColor("#F5F5F5"));
}
return textView;
}
}
Key Features Demonstrated
DatePicker Features:
- Calendar View: Can show calendar or spinner mode
- Date Selection: Programmatic and user selection
- Event Handling: OnDateChangedListener for real-time updates
- Date Retrieval: Getting day, month, and year values
TableLayout Features:
- Row and Column Structure: Organized data presentation
- Dynamic Content: Adding and removing rows programmatically
- Styling: Background colors and padding for better appearance
- Responsive Design: Stretch columns to fit screen width
Best Practices
- DatePicker: Always add 1 to month value (0-indexed)
- TableLayout: Use ScrollView for large tables
- Performance: Consider RecyclerView for large datasets
- Accessibility: Add content descriptions for screen readers
- Validation: Validate date ranges and table data before processing